<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 
        修饰符：
            .lazy 取代input 监听change 事件
            .number 输入字符串转为有效的数字
            .trim 输入首尾空格过滤
        -->
        <h5>lazy 修饰符是将v-model对具有input事件的表单元素进行change事件的切换</h5>
        <p>msg:{{ msg }}</p>
        <input type="text" v-model="msg">
        <input type="text" v-model.lazy="msg">
        <h5>number 将输入的可以转换为数值的数据进行数值化转换,不可以转换的保留原值</h5>
        <!--
            number 修饰使用了JS的数值转换工具 parseFloat，进行逐位转换
            vue3的新版本中，当input type=number 时会自动使用该修饰符功能
        -->
        <p>num:{{ num }}</p>
        <input type="text" v-model.number="num">
        <h5>trim 输入首尾空格过滤</h5>
        <pre>|{{ info }}|</pre>
        <input type="text" v-model="info">
        <input type="text" v-model.trim="info">
    </div>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        createApp({
            data(){
                return {
                    msg:"测试数据",
                    num:"",
                    info:""
                }
            }
        }).mount("#app")
    </script>
</body>
</html>